<template>
	<view class="container padding">
		<view class="con bg-white">
			<view class="header flex flex-direction align-center justify-center bg-white">
				<image src="../../static/school_logo.png" mode=""></image>
				<view class="class-name text-center text-lg margin-top text-bold">{{class_info.class_name}}</view>
			</view>
			<form class="margin-top-xss" @submit="formSubmit">
				<view class="cu-form-group">
					<view class="title">姓名<text class="text-red margin-left-xs ">*</text></view>
					<input class="text-right" placeholder="请输入姓名" placeholder-style="text-align: right; font-size: 28rpx; color: #999999;" v-model="form_data.student_name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码<text class="text-red margin-left-xs">*</text></view>
					<input class="text-right" type="number" placeholder="请输入11位数字" placeholder-style="text-align: right; font-size: 28rpx; color: #999999;" v-model="form_data.phone"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">性别<text class="text-red margin-left-xs">*</text></view>
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="picker">
							{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">学号<text class="text-red margin-left-xs">*</text></view>
					<input class="text-right" type="number" placeholder="请输入学号" placeholder-style="text-align: right; font-size: 28rpx; color: #999999;" v-model="form_data.student_no"></input>
				</view>
				<view class="cu-form-group">
				</view>
			</form>
		</view>
		<view class="btn text-white text-center" form-type="submit" @tap="inviteStudent">加入班级</view>
	</view>
</template>

<script>
	import u from '@/utils/common.js'
	export default {
		data() {
			return {
				bgImage: "../../static/class_bg.jpg",
				class_info: {},
				picker: ['保密','男','女'],
				index: 0,
				class_id: '',
				form_data: {
					class_id: 1,
					student_name: '',
					student_no: '',
					sex: 0,
					phone: ''
				}
			}
		},
		onLoad(p){
			this.class_id = p.class_id
			u.appLogin(()=>{
				this.getMyClass()
			})
		},
		methods: {
			inviteStudent(){
				this.form_data.class_id = this.class_id
				if(!this.form_data.student_name){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return
				}
				if(!this.form_data.phone){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return
				}
				if(!this.form_data.student_no){
					uni.showToast({
						title: '请输入学号',
						icon: 'none'
					});
					return
				}
				u.request({
					url: 'users/student/join_class',
					method: 'POST',
					data: this.form_data,
					success: res => {
						console.log(res);
						u.msg('加入成功！',()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						})
					},
					fail: err=>{
						console.log(err);
						uni.showToast({
							title: err.msg,
							icon: 'none'
						});
					}
				})
				
			},
			PickerChange(e) {
				this.index = e.detail.value
				this.form_data.sex =  this.index
			},
			getMyClass() {
				u.request({
					url: 'users/class/info',
					method: 'GET',
					data: {
						class_id: this.class_id,
					},
					success: res => {
						console.log(res)
						this.class_info = res.result.info
					},
					fail: err=>{
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group{
		margin: 0 28rpx;
		padding: 0;
		.title{
			font-size: 28rpx;
			color: #666666;
		}
	}
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		margin-top: -30rpx;
	}
	.con{
		border-radius: 25rpx;
		height: 896rpx;
		box-shadow: 0 0 0 10rpx #F5F5F5;
	}
	.header {
		width: 100%;
		height: 280rpx;
		background-size: cover;
		border-radius: 25rpx 25rpx 0 0;
		image {
			width: 132rpx;
			height: 132rpx;
		}
	}

	.btn {
		width: 80vw;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #2982ff;
		margin-top: 150rpx;
		margin-left: 5vw;
	}
</style>
